<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" charset="utf-8">
/*global optionValues*/
(function () {
	var params, url;

	optionValues = {
		min: false,
		jquery: "1.4.2",
		theme: "default"
	};
	params = window.location.search;

	function css(src) {
		document.write('<link rel="stylesheet" href="' + src + '" type="text/css" />');
	}

	function script(src) {
		document.write('<script src="' + src + '" type="text/javascript" charset="utf-8"></sc' + 'ript>');
	}

	if (params) {
		params = params.substr(1).split('&');

		for (i = 0; i < params.length; i ++) {
			var equals = params[i].split('=');
			
			if (Object.prototype.hasOwnProperty.call(optionValues, equals[0])) {
				optionValues[equals[0]] = equals[1];
			}
		}
	}


	css('../themes/' + optionValues.theme + '/css/uniform.' + optionValues.theme + '.css');

	url = '://ajax.googleapis.com/ajax/libs/jquery/'

	if (window.location.protocol == 'https:') {
		url = 'https' + url;
	} else {
		url = 'http' + url;
	}

	url += optionValues.jquery;

	if (optionValues.min) {
		url += '/jquery.min.js';
	} else {
		url += '/jquery.js';
	}

	script(url);

	if (optionValues.min) {
		script('../jquery.uniform.min.js');
	} else {
		script('../jquery.uniform.js');
	}
}());
		</script>
		<script type="text/javascript">
// Can't merge with previous script block since this relies on jQuery and that
// was not loaded until the previous script block ends
$(function () {
	var $min, $remove, $apply, $uniformed;

	// Debugging code to check for multiple click events
	$selects = $("select").click(function () {
		if (typeof console !== 'undefined' && typeof console.log !== 'undefined') {
			console.log($(this).attr('id') + " clicked");
		}
	});

	$uniformed = $(".styleThese").find("input, textarea, select, button, a.uniformTest").not(".skipThese");
	$uniformed.uniform();

	$("#optionsForm input, #optionsForm select").change(function () {
		this.form.submit();
	});

	if (optionValues.min) {
		$min = $("#optionsMin");

		if ($min.prop) {
			$min.prop("checked", true);
		} else {
			$min.attr("checked", "checked");
		}
	}

	$("#optionsJquery").val(optionValues.jquery);
	$("#optionsTheme").val(optionValues.theme);
	$("#jqueryCurrentVersion").text("Using " + jQuery.fn.jquery);
	$remove = $("#remove");
	$apply = $("#apply");
	$remove.click(function () {
		$uniformed.uniform.restore();
		$remove.hide();
		$apply.show();
		return false;
	});
	$apply.click(function () {
		$uniformed.uniform();
		$apply.hide();
		$remove.show();
		return false;
	});
});
		</script>
		<style type="text/css" media="screen">
			body {
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				color: #666;
				padding: 40px;
			}
			h1 {
				margin-top: 0;
			}
			label {
				font-size: 10px;
				font-weight: bold;
				text-transform: uppercase;
				display: block;
				margin-bottom: 3px;
				clear: both;
			}
			.error {
				background-color: #FF8080;
			}
			.hide {
				display: none;
			}
		</style>
	</head>
	<body>
		<h1>Uniform Demo</h1>
		<form method=GET action="?" id="optionsForm">
			Options:
			<input type=checkbox name="min" id="optionsMin"> Minified
			<select name="theme" id="optionsTheme">
				<option value="default">Default</option>
				<option value="agent">Agent</option>
				<option value="aristo">Aristo</option>
				<option value="jeans">Jeans</option>
			</select>
			<select name="jquery" id="optionsJquery">
				<option value="1.3">jQuery 1.3.x</option>
				<option value="1.4.2">jQuery 1.4.2</option>
				<option value="1.4">jQuery 1.4.x</option>
				<option value="1.5">jQuery 1.5.x</option>
				<option value="1.6">jQuery 1.6.x</option>
				<option value="1.7">jQuery 1.7.x</option>
				<option value="1.8">jQuery 1.8.x</option>
				<option value="1.9.0">jQuery 1.9.0</option>
			</select>
			<span id="jqueryCurrentVersion"></span>
			<button id="remove">Remove</button>
			<button id="apply" style="display:none">Apply</button>
		</form>
		<form class="styleThese">
			<table width="100%">
				<tr>
					<td width="50%">
						<div>
							<label>Message:</label>
							<textarea cols="40" rows="5"></textarea>
						</div>
						<div>
							<label>Unstyled:</label>
							<input class="skipThese" type="text" size="40" value="This is unstyled on purpose" />
						</div>
						<div>
							<label>Your Name:</label>
							<input type="text" size="40" value="John Doe"/>
						</div>
						<div>
							<label>Your Email:</label>
							<input type="email" size="40" value="mr_hotshot0357@example.com" />
						</div>
						<div>
							<label>Search:</label>
							<input type="search" size="40"/>
						</div>
						<div>
							<label>Phone:</label>
							<input type="tel" size="40"/>
						</div>
						<div>
							<label>URL:</label>
							<input type="url" size="40"/>
						</div>
						<div>
							<label>Datetime:</label>
							<input type="datetime" size="40"/>
						</div>
						<div>
							<label>Date:</label>
							<input type="date" size="40"/>
						</div>
						<div>
							<label>Month:</label>
							<input type="month" size="40"/>
						</div>
						<div>
							<label>Week:</label>
							<input type="week" size="40"/>
						</div>
						<div>
							<label>Time:</label>
							<input type="time" size="40"/>
						</div>
						<div>
							<label>Datetime-local:</label>
							<input type="datetime-local" size="40"/>
						</div>
					</td>
					<td>
						<div>
							<label>Number:</label>
							<input type="number" size="40"/>
						</div>
						<div>
							<label>Range:</label>
							<input type="range" size="40"/>
						</div>
						<div>
							<label>Color:</label>
							<input type="color" size="40"/>
						</div>
						<div>
							<label>Some Password:</label>
							<input type="password" size="40"/>
						</div>
						<div>
							<label>I found your site:</label>
							<select id="demoFoundSite">
								<option value="google">Through Google</option>
								<option value="twitter">Through Twitter</option>
								<option value="other">Other&hellip;</option>
								<option value="hi">&lt;Hi&gt;</option>
							</select>
						</div>
						<div>
							<label>How do you feel?</label>
							<select id="demoFeeling" multiple="multiple" size=4>
								<option value="elated">Elated</option>
								<option value="happy">Happy</option>
								<option value="content">Content</option>
								<option value="ok">Ok</option>
								<option value="unhappy">Unhappy</option>
								<option value="frustrated">Frustrated</option>
								<option value="cranky">Cranky</option>
								<option value="mad">Mad</option>
								<option value="unlisted">Anything else</option>
							</select>
						</div>
						<div>
							<label>
								<input type="radio" name="radio" value="hi" /> Saying hi
							</label>
							<label>
								<input type="radio" name="radio" value="feedback" /> Sending feedback
							</label>
							<label>
								<input type="radio" name="radio" value="default" checked="CHECKED" /> Default Seleted Radio
							</label>
						</div>
						<div>
							<label>
								<input type="checkbox" id="contactBack" /> Please contact me back
							</label>
							<label>
								<input type="checkbox" checked="CHECKED" id="goodDay" /> Today is a good day
							</label>
						</div>
						<div>
							<label>Upload a file:</label>
							<input type="file" />
						</div>
					</td>
				</tr>
			</table>
			<div class="error">
				<!-- Here are some fields with "display: none" on them.
				When Uniform wraps them, the surrounding div should also get
				the "display: none" style applied. -->
				<input type="text" value="You should not see this." class="hide" />
				<select id="demoHide" class="hide">
					<option>If you can see this, it's an error</option>
				</select>
				<input type="checkbox" class="hide" />
				<input type="radio" name="radio" class="hide" value="hidden" />
				<input type="file" class="hide" />
			</div>
			<div>
				<input type="submit" />
				<input type="reset" />
			</div>
		</form>
		<p class="styleThese">
			<a href="http://google.com/">Normal link</a>,
			<a href="http://google.com" class="uniformTest">uniformed link (self)</a> and
			<a href="http://google.com" class="uniformTest" target="newWindow">uniformed link (new window)</a>.
		</p>
	</body>
</html>
